<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/style/memberAdd.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/style/common.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_4586065_entif6iefxe.css">
</head>
<body>
<c:import url="../header.jsp"></c:import>
<div id="box">
    <div id="TopDiv">
        <span onclick="history.back()"><i class="iconfont icon-fanhuijiantou"></i>&nbsp;&nbsp;返回&nbsp;&nbsp;&nbsp;</span>
        <span><strong>&nbsp;&nbsp;修改会员信息</strong></span>
    </div>
    <div id="FromDiv">
        <form action="/MemberUpdateServlet" method="post">
            <input type="hidden" name="id" id="id" value="<%=request.getParameter("id")%>">
        <div class="input">
            <span class="red">*</span>&nbsp;姓名:&nbsp;&nbsp;
            <input id="name" name="name" class="text" type="text" autocomplete="off" placeholder="请输入要修改的会员姓名" maxlength="20">
            <span class="Errorname"></span>
        </div>
        <div class="input">
            <span class="red">*</span>&nbsp;手机号:&nbsp;&nbsp;
            <input id="phone" name="phone" class="text" type="text" autocomplete="off" placeholder="请输入手机号" maxlength="11">
            <span class="Errorphone"></span>
        </div>
        <div class="input">
            <span class="red">*</span>&nbsp;储值余额:&nbsp;&nbsp;
            <input id="balance" name="balance" class="text" type="text" autocomplete="off" placeholder="请输入要修改储值金额">
            <span class="Errorbalance"></span>
        </div>
        <div class="input">
            <span class="red">*</span>&nbsp;累计消费:&nbsp;&nbsp;
            <input id="cartnumber" name="totalAmount" class="text" type="text" autocomplete="off" placeholder="请输入消费金额" maxlength="12">
            <span class="Errorcartnumber"></span>
        </div>
        <div class="button">
            <button class="cancel" onclick="history.back()">
                <span>取消</span>
            </button>
            <button class="conserve" onclick="update(<%=request.getParameter("id")%>)">
                <span>修改</span>
            </button>
        </div>
        </form>
    </div>
</div>
<c:import url="../Leftnavigationbar.jsp"></c:import>
</body>
<script src="${pageContext.request.contextPath}/js/jquery.js"></script>
<script>
    $(function (){
        bind(<%=request.getParameter("id")%>);
    })

    function bind(id) {
        $.ajax({
            type: "post",
            url: "/MemberEchoServlet",
            data: {id},
            success: function (data) {
                $('#name').val(JSON.parse(data).name)
                $('#phone').val(JSON.parse(data).phone)
                $('#balance').val(JSON.parse(data).balance)
                $('#cartnumber').val(JSON.parse(data).totalAmount)
            }
        })
    }

    function update(id){
        $.ajax({
            type: "post",
            url: "/MemberUpdateServlet",
            data: {
                id:id,
                name:$('#name').val,
                phone:$('#phone').val(),
                balance:$('#balance').val,
                totalAmount:$('#cartnumber').val
            },
            success:function (data){
                if(data=="ok"){
                    alert('修改成功!')
                    window.location.href='/admin/member.jsp'
                }
            }
        })
    }
    // 账号
    const name=document.getElementById('name')
    name.addEventListener('blur',(e) => {
        if(name.value===''){
            document.querySelector('.Errorname').innerHTML='姓名不能为空!'
            return
        }
    })
    // 手机号
    const phone=document.getElementById('phone')
    phone.addEventListener('blur',(e) => {
        if(phone.value===''){
            document.querySelector('.Errorphone').innerHTML='手机号不能为空!'
            return
        }
    })
    // 会员卡号
    const cartnumber=document.getElementById('cartnumber')
    cartnumber.addEventListener('blur',(e) => {
        if(cartnumber.value===''){
            document.querySelector('.Errorcartnumber').innerHTML='累计消费为空,将默认为0！'

            return
        }
    })

    // 储值余额
    const balance=document.getElementById('balance')
    balance.addEventListener('blur',(e) => {
        if(balance.value===''){
            document.querySelector('.Errorbalance').innerHTML='储值金额不能为空,将默认为0！'
            return
        }
    })

</script>
</html>